<template>
  <KView class="sys-classify">
    <KView class="sys-classify-header-div">
      <sys-header :user="user" title="分 类"></sys-header>
    </KView>
    <KView class="sys-classify-line"></KView>

    <KView class="sys-classify-content">
      <KView class="sys-classify-goods-search">
        <search-input placeholder="输入商品名称" @click="toSearchPage"></search-input>
      </KView>
      <KView class="sys-classify-goods-list">
        <goods-classify></goods-classify>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysHeader from 'views/systemIndex/header';
  import SearchInput from 'views/shopMall/shopGoods/searchInput';
  import GoodsClassify from './goodsClassify';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      toSearchPage() {
        if (this.isMiniprogram) {
          window.open('/searchGoods');
        }
      }
    },

    components: {
      SysHeader,
      SearchInput,
      GoodsClassify
    }
  };

</script>

<style lang="scss">
  .sys-classify {
    height: 100%;
    overflow: auto;

    .sys-classify-header-div {
      height: formatPx(70);
      padding: formatPx(40) formatPx(30) formatPx(45);
    }

    .sys-classify-line {
      height: 1px;
      background: #DADADA;
    }

    .sys-classify-content {
      margin-top: formatPx(40);
      height: calc(100% - #{formatPx(200)} - 1px);

      .sys-classify-goods-search {
        padding: 0 formatPx(30);
      }

      .sys-classify-goods-list {
        margin-top: formatPx(40);
        height: calc(100% - #{formatPx(110)});
        overflow: auto;
      }
    }
  }

</style>
